---
id: columns
title: Columns & Column
---

import { Props, BoxProps } from '../../core/components';

`Columns` renders children horizontally in equal-width columns by default, with consistent spacing between them.

### Space

```jsx live
const App = () => {
  return (
    <Columns space={4}>
      <Placeholder />
      <Placeholder />
      <Placeholder />
    </Columns>
  )
}

render(<App />)
```

### Nested

```jsx live
const App = () => {
  return (
    <Columns space={12}>
      <Columns space={4}>
        <Placeholder />
        <Placeholder />
      </Columns>
      <Placeholder />
    </Columns>
  )
}

render(<App />)
```


### Width

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Columns space={4}>
        <Column width="1/2">
          <Placeholder />
        </Column>
        <Column width="1/2">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/3">
          <Placeholder />
        </Column>
        <Column width="1/3">
          <Placeholder />
        </Column>
        <Column width="1/3">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="2/3">
          <Placeholder />
        </Column>
        <Column width="1/3">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/4">
          <Placeholder />
        </Column>
        <Column width="1/4">
          <Placeholder />
        </Column>
        <Column width="1/4">
          <Placeholder />
        </Column>
        <Column width="1/4">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/4">
          <Placeholder />
        </Column>
        <Column width="1/2">
          <Placeholder />
        </Column>
        <Column width="1/4">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/4">
          <Placeholder />
        </Column>
        <Column width="3/4">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/5">
          <Placeholder />
        </Column>
        <Column width="2/5">
          <Placeholder />
        </Column>
        <Column width="2/5">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/5">
          <Placeholder />
        </Column>
        <Column width="3/5">
          <Placeholder />
        </Column>
        <Column width="1/5">
          <Placeholder />
        </Column>
      </Columns>

      <Columns space={4}>
        <Column width="1/5">
          <Placeholder />
        </Column>
        <Column width="4/5">
          <Placeholder />
        </Column>
      </Columns>
    </Stack>
  )
}

render(<App />)
```

### Default Width

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Columns defaultWidth="1/2" space={4}>
        <Placeholder />
        <Placeholder />
      </Columns>

      <Columns defaultWidth="1/3" space={4}>
        <Placeholder />
        <Placeholder />
      </Columns>

      <Columns defaultWidth="1/4" space={4}>
        <Placeholder />
        <Placeholder />
        <Column width="1/2">
          <Placeholder />
        </Column>
      </Columns>
    </Stack>
  )
}

render(<App />)
```

### Fluid Height

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const App = () => {
  return (
    <Container height={440}>
      <Columns space={4} alignX="center" height="fluid">
        <Rows space={4}>
          <Row height="content">
            <Placeholder height={100} />
          </Row>
          <FluidPlaceholder />
        </Rows>
        <FluidPlaceholder />
        <Rows space={4}>
          <FluidPlaceholder />
          <Row height="content">
            <Placeholder height={100} />
          </Row>
        </Rows>
      </Columns>
    </Container>
  )
}

render(<App />)
```

### AlignX

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Columns space={4} alignX="left">
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
      </Columns>

      <Columns space={4} alignX="center">
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
      </Columns>

      <Columns space={4} alignX="right">
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
      </Columns>

      <Columns space={4} alignX="between">
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
      </Columns>

      <Columns space={4} alignX="around">
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
      </Columns>

      <Columns space={4} alignX="evenly">
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
        <Column width="content">
          <Placeholder width={100} />
        </Column>
      </Columns>
    </Stack>
  )
}

render(<App />)
```

### AlignY

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Columns space={4} alignY="top">
        <Placeholder height={80} />
        <Placeholder height={140} />
        <Placeholder height={120} />
        <Placeholder height={100} />
      </Columns>

      <Columns space={4} alignY="center">
        <Placeholder height={100} />
        <Placeholder height={120} />
        <Placeholder height={140} />
        <Placeholder height={80} />
      </Columns>

      <Columns space={4} alignY="bottom">
        <Placeholder height={80} />
        <Placeholder height={140} />
        <Placeholder height={120} />
        <Placeholder height={100} />
      </Columns>
    </Stack>
  )
}

render(<App />)
```

### markAsColumn

Use this function to mark your custom component as `Column` (required due to an internal implementation of `Stacks`).

```jsx
import { markAsColumn } from '@mobily/stacks'
```

```jsx live
const CustomColumn = props => {
  const { children } = props
  return (
    <Column>
      {children}
    </Column>
  )
}

markAsColumn(CustomColumn)

const App = () => {
  return (
    <Columns space={4}>
      <CustomColumn>
        <Placeholder />
      </CustomColumn>
      <CustomColumn>
        <Placeholder />
      </CustomColumn>
      <CustomColumn>
        <Placeholder />
      </CustomColumn>
    </Columns>
  )
}

render(<App />)
```

### Columns Props


:::info

`Columns` and `Column` components accept all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'space',
      type: 'responsiveProp<float>',
      required: false,
    },
    {
      name: 'height',
      type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
      required: false,
    },
    {
      name: 'alignY',
      type: 'responsiveProp<[#top | #center | #bottom | #stretch]>',
      required: false,
    },
    {
      name: 'alignX',
      type: 'responsiveProp<[#left | #center | #right | #between | #around | #evenly]>',
      required: false,
    },
    {
      name: 'reverse',
      type: 'bool',
      required: false,
    },
    {
      name: 'collapseBelow',
      type: 'string',
      required: false,
    }
  ]}
/>

<BoxProps />

### Column Props

<Props
  data={[
    {
      name: 'width',
      type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
      required: false,
      defaultValue: 'fluid'
    },
  ]}
/>

<BoxProps omit={[
  'margin',
  'marginX',
  'marginY',
  'marginTop',
  'marginBottom',
  'marginLeft',
  'marginRight',
  'marginStart',
  'marginEnd',
]} />
